<template>
  <div class="carlist">
    <!-- 卡片列表 -->
    <div class="carlist-item" v-for="item in carList" :key="item.id">
      <div class="carlist-item-title">
        <div class="div1">
          <span class="span1"> 车队名称：</span>
          <span class="carlist-item-teamName">
            {{ item.fleetName }}
          </span>
        </div>

        <span class="carlist-item-join" @click="gotoJoin(item)">申请加入</span>
      </div>
      <div class="carlist-item-amt">￥ {{ item.balance }}</div>
      <div class="carlist-item-cardNo">NO: {{ item.cardNumber }}</div>
    </div>

    <!-- 填写个人用户信息弹框 -->
    <van-dialog
      class="infoDialog"
      v-model="joinShow"
      title="填写个人信息"
      show-cancel-button
      confirmButtonText="申请加入"
      confirmButtonColor="#f59a23"
      :before-close="handleBeforeClose"
      @cancel="handleCancel"
      @confirm="handleJoin"
    >
      <van-cell-group>
        <van-field
          v-model="fleetCardSubForm.username"
          required
          clearable
          label="用户姓名"
          placeholder="请输入用户名"
          :error-message="errorMessage"
        />

        <van-field
          v-model="fleetCardSubForm.phone"
          type="number"
          label="手机号"
          placeholder="请输入手机号"
        />
        <van-field
          v-model="fleetCardSubForm.truckNumber"
          type="text"
          label="车牌号"
          placeholder="请输入"
        />
      </van-cell-group>
    </van-dialog>
  </div>
</template>
<script>
import Vue from "vue";
import { mapGetters } from "vuex";
import { Button, Dialog, Field } from "vant";

Vue.use(Button);
Vue.use(Dialog);
Vue.use(Field);
export default {
  name: "CardList",
  head() {
    return {
      title: "我的车队-列表"
    };
  },
  props: {
    carList: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    carList(val) {
      console.log(val, "333333");
    }
  },
  data() {
    return {
      joinShow: false,

      fleetCardSubForm: {
        username: "", //
        truckNumber: "", // 车牌号
        phone: "" // this.$store.state.authen.userInfo.mobilePhone //  this.userInfo.mobilePhone
      },
      errorMessage: "", // 错误提示,
      parentCardInfo: {} //  车队卡id
    };
  },
  computed: {
    ...mapGetters({
      userInfo: "authen/userInfo"
    })
  },
  watch: {
    "fleetCardSubForm.username": {
      handler(val) {
        const username = val.trim();
        if (!username) return (this.errorMessage = "请输入用户名");
        this.errorMessage = "";
        this.fleetCardSubForm.username = username;
      }
    },
    joinShow(val) {
      if (!val) {
        // 清空表单
        this.errorMessage = "";
        this.fleetCardSubForm = {
          username: "", //
          truckNumber: "", // 车牌号
          phone: "" // this.$store.state.authen.userInfo.mobilePhone //  this.userInfo.mobilePhone
        };
      }
    }
  },
  methods: {
    gotoJoin(data) {
      this.joinShow = true;
      this.parentCardInfo = data;
    },
    // 关闭前的校验
    handleBeforeClose(action, done) {
      let name = this.fleetCardSubForm.username.trim();
      if (!name) {
        this.errorMessage = "请输入用户姓名";
        done(false);
      } else {
        done();
      }
    },
    // 确认申请加入
    async handleJoin() {
      console.log("submit", this);
      const params = {
        // 173 的数据   userId： 481719
        // 174 的数据   userId： 484786
        appUserId: 484786, // 用户id   this.$store.state.authen.userInfo.userId
        enterpriseId: 174, // 油企id   this.enterpriseId
        fleetCardId: this.parentCardInfo.id, // 主卡id
        name: this.fleetCardSubForm.username, //  用户名称
        phone: this.fleetCardSubForm.phone,
        truckNumber: this.fleetCardSubForm.truckNumber // 车牌号
      };
      Dialog.confirm({
        message: "确定申请加入该车队?"
      }).then(async () => {
        const res = await this.$axios.$post("/fleetCardSub/apply", params);
        Dialog.alert({
          message: res.message
        }).then(() => {
          this.$router.push({
            path: "/car"
            // path: `/${this.enterpriseId}/car`
          });
        });
      });
    },

    //  取消加入
    handleCancel() {
      this.joinShow = false;
      console.log("取消333");
    }
  }
};
</script>
<style scoped lang="scss">
.carlist {
  margin-top: 0.5rem;
  // 每一个车队卡item的样式
  .carlist-item {
    border: 1px solid #ddd;
    border-radius: 0.3rem;
    padding: 0.3rem;
    margin-bottom: 0.3rem;
    background-color: antiquewhite;
    // 卡的车队名称样式
    .carlist-item-title {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      font-size: 0.3rem;
      .div1 {
        width: 90%;
        display: flex;
        .span1 {
          display: block;
          width: 1.5rem;
        }
        .carlist-item-teamName {
          display: block;
          width: 3.5rem;
          text-align: justify;
        }
      }
      .carlist-item-join {
        color: #f59a23;
        display: block;
        width: 1.5rem;
      }
    }

    // 卡的金额样式
    .carlist-item-amt {
      font-size: 0.4rem;
      font-weight: bold;
      margin: 0.5rem 0rem;
    }

    // 卡号样式
    .carlist-item-cardNo {
      text-align: right;
      font-size: 0.3rem;
    }
  }

  //   用户信息弹框
  .infoDialog {
    .van-dialog__header {
      padding: 10px;
      border-bottom: 1px solid #ddd;
      margin-bottom: 20px;
    }
    // .van-dialog__content {
    //   .van-cell-group {
    //     .van-field {
    //       .van-field__label {
    //         width: 4.2rem;
    //       }
    //     }
    //   }
    // }
  }
}
</style>
